<template>
  <div id="tjgwCar">
    <!-- 头部导航栏-->
    <div class="navgd">
      <el-row class="top">
        <el-col :span="12" class="zuo">
          <el-row style="margin-top: 10px;">
            <el-col :span="2" :offset="1">
              <router-link to="/"><a>商城</a></router-link>
            </el-col>
            <el-col :span="2">
              <a>MIUI</a>
            </el-col>
            <el-col :span="2">
              <a>loT</a>
            </el-col>
            <el-col :span="2">
              <a>云服务</a>
            </el-col>
            <el-col :span="2">
              <a>天星数科</a>
            </el-col>
          </el-row>
        </el-col>
        <el-col class="you" :span="12">
          <el-row style="margin-top: 10px;">
            <el-col :span="2" :offset="17">
              <el-dropdown>
                <a><i class="el-icon-user"></i>我的</a>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="user.id!=null">
                    <el-link type="info" @click="goUserMain">用户中心</el-link>
                  </el-dropdown-item>

                  <!--商户-->
                  <el-dropdown-item v-if="user.commercialState==1">
                    <router-link to="/home">
                      <el-link type="info">商户管理</el-link>
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.commercialState==null">
                    <router-link to="/apply_for_commercial">
                      <el-link type="info">我要成为商户</el-link>
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.commercialState==0">
                    <router-link to="/apply_for_supplier">
                      <el-link type="info">申请商户审核等待中...</el-link>
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.commercialState==2">
                    <router-link to="/apply_for_supplier">
                      <el-link type="info">申请商户被拒绝，点击我可再次申请</el-link>
                    </router-link>
                  </el-dropdown-item>

                  <!--供应商-->
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==1">
                    <router-link to="/home">
                      <el-link type="info">供应商管理</el-link>
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==null">
                    <router-link to="/apply_for_supplier">
                      <el-link type="info">我要成为供应商</el-link>
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==0">
                    <el-link type="info">申请供应商审核等待中...</el-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null && user.supplierState==2">
                    <router-link to="/apply_for_supplier">
                      <el-link type="info">申请供应商被拒绝，点击我可再次申请</el-link>
                    </router-link>
                  </el-dropdown-item>

                  <el-dropdown-item v-if="user.id==null">
                    <router-link to="/Login">
                      <el-link type="info">登录</el-link>
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.id!=null">
                    <span @click="logout"><el-link type="info">退出</el-link></span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="3" class="catcss">
              <el-badge :value="cartnum" class="item">
                <button @click="tzgwcar" class="catcss">购物车</button>
              </el-badge>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!--搜索-->
    <div class="searchkuang" style="margin-top: 30px">
      <el-row>
        <el-col :span="16">
          <el-row class="shopflgw" style="margin-top: 42px;">
            <el-col :span="3" :offset="1">
              <a @click="fenlentzshopXq('')">全部商品分类</a>
            </el-col>
            <el-col :span="1">
              &nbsp;
            </el-col>

            <div v-for="(s,index) in  shoptypes">
              <el-col :span="3" v-if="index<5">
                <a @click="fenlentzshopXq(s.id)">{{s.name}}</a>
              </el-col>
            </div>

            <el-col :span="2">
              <a @click="fenlentzshopXq('')"><i class="el-icon-zoom-in">更多></i></a>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" style="margin-top: 35px">
          <el-input v-model="searchtxt" style="width:250px" placeholder="请输入内容" clearable></el-input>
          <el-button type="info" style="width:70px" @click="searchipt(searchtxt)">搜索</el-button>
        </el-col>
      </el-row>

      <el-row style="margin-top: 40px">
        <el-col :span="12">
          <span style="font-size: 20px;margin-left:20px">{{shop.shopName}}</span>
        </el-col>
        <el-col :span="4" :offset="8" class="yhpj">
          <el-row>
            <el-col :span="12" :offset="12">
              <a href="#">用户评价</a>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <el-divider></el-divider>

    <!--商品详情-->
    <el-row>
      <el-col :span="9" :offset="1">
        <el-image style="width: 100%;height: 450px"
                  :src="shop.imags[0].imagUrl"
                  fit="fill"></el-image>
      </el-col>
      <el-col :span="13" :offset="1">
        <el-row style="margin-top: 10px">
          <el-col :span="18">
            <span style="font-size: 24px;">{{shop.shopName}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="10">
            <span style="color: #B0B0B0; font-size: 18px;">{{shop.type.name}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="18">
            <div style="width: 100%;height: 80px;background-color: whitesmoke">
              <el-row>
                <el-col :span="12" style="margin-top: 28px">
                  <i class="el-icon-location-outline" style="margin-left: 10px"></i>
                  <span style="font-size: 16px;">{{shop.shopAddr}}</span><span
                  style="color: #ff6600;font-size: 15px;margin-left:10px">有现货</span>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="10">
            <span style="color: #B0B0B0; font-size: 16px;">{{shop.shopRemark}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="18">
            <div style="width: 100%;height: 80px;background-color: whitesmoke">
              <el-row>
                <el-col :span="4" style="margin-top: 25px">
                  <span style="font-size: 18px;margin-left:10px">价格：</span>
                </el-col>
                <el-col :span="6" style="margin-top: 24px">
                  <span style="color: red;font-size: 22px;">{{shop.shopPrice}}元</span>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="18">
            <div style="width: 100%;height: 60px;background-color: whitesmoke">
              <el-row>
                <el-col :span="4" style="margin-top: 18px">
                  <span style="font-size: 18px;margin-left:10px">数量：</span>
                </el-col>
                <el-col :span="6" style="margin-top: 18px">
                  <el-input-number size="mini" @change="handleChange(cart.gid,cart.quantity)"
                                   v-model="cart.quantity" :min="1"></el-input-number>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="10" style="margin-top: 50px">
          <el-col :span="8">
            <button class="tjgwcbtn" @click="addCart"><span>加入购物车</span></button>
          </el-col>
          <el-col :span="6">
            <button class="ljgmbtn" @click="gobuy"><span>立即购买</span></button>
          </el-col>
        </el-row>
        <el-row :gutter="6" style="margin-top: 60px">
          <el-col :span="5">
            <i class="el-icon-pie-chart"><span style="color: #B0B0B0;">七天无理由退货</span></i>
          </el-col>
          <el-col :span="3">
            <i class="el-icon-pie-chart"><span style="color: #B0B0B0;">运费说明</span></i>
          </el-col>
          <el-col :span="3">
            <i class="el-icon-pie-chart"><span style="color: #B0B0B0;">企业信息</span></i>
          </el-col>
          <el-col :span="4">
            <i class="el-icon-pie-chart"><span style="color: #B0B0B0;">售后7天保护</span></i>
          </el-col>
          <el-col :span="5">
            <i class="el-icon-pie-chart"><span style="color: #B0B0B0;">售后服务政策</span></i>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20" :offset="1">
        <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="宝贝详情" name="first">
            <ShopImags ref="shopImags"></ShopImags>
          </el-tab-pane>
          <el-tab-pane label="评价" name="second">
            <ShopEvaluates ref="shopEvaluates"></ShopEvaluates>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <!--底部-->
    <div class="site-footer">
      <div class="wenzitiao">
        <div class="wenzitiaoxia" style="margin-top: 20px">
          <a><img class="img1" src="../jiangzhipeng/images/字1.png" alt="图片出错" width="24px" height="24px">预约维修服务
          </a>
          <a><img class="img2" src="../jiangzhipeng/images/字2.png" alt="图片出错" width="24px" height="24px">7天无理由退货
          </a>
          <a><img class="img3" src="../jiangzhipeng/images/字3.png" alt="图片出错" width="24px" height="24px">15天免费换货
          </a>
          <a><img class="img4" src="../jiangzhipeng/images/字4.png" alt="图片出错" width="24px" height="24px">满69包邮（米粉节特惠）
          </a>
          <a class="shebian">
            <img class="img5" src="../jiangzhipeng/images/字5.png" alt="图片出错" width="24px" height="24px">520余家售后网点
          </a>
        </div>
      </div>
      <div class="zuihouxiaozi">
        <div class="zuihouxiaozizi">
          <a>小米商城 |</a>
          <a>MIUI |</a>
          <a>米家 |</a>
          <a>米聊 |</a>
          <a>多看 |</a>
          <a>游戏 |</a>
          <a>政企服务 |</a>
          <a>小米天猫店 |</a>
          <a>小米集团隐私政策 |</a>
          <a>小米公司儿童信息保护规则 |</a>
          <a>小米商城隐私政策 |</a>
          <a>小米商城用户协议 |</a>
          <a>问题反馈 |</a>
          <a>Select Location</a>
          <br>
          <a>北京互联网法院法律服务工作站 |</a>
          <a>中国消费者协会 |</a>
          <a>北京市消费者协会</a>
          <br>
          <span>@</span>
          <a>mi.com</a>
          <span>京ICP备10046444号</span>
          <a>京公网安备11010802020134号</a>
          <a>京网文[2020]027-042号</a>
          <br>
          <a>（京）网械平台备字（2018）第00005号</a>
          <a>互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
          <a>营业执照</a>
          <a>医疗器械质量公告</a>
          <br>
          <a>增值电信业务许可证</a>
          <span>网络食品经营备案</span>
          <span>京食药网食备202010048</span>
          <a>食品经营许可证</a>
          <br>
          <span>违法和不良信息举报电话：171-5104-4404</span>
          <a>知识产权侵权投诉</a>
          <span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  require("./css/tjgwcar.css")
  import ShopImags from "./ShopImags";
  import ShopEvaluates from "./ShopEvaluates";

  export default {
    name: "tjgwCar",
    data() {
      return {
        activeName: 'first',
        user: {
          id: sessionStorage.getItem('id')
        },
        cart: {
          uid: sessionStorage.getItem('id'),
          gid: JSON.parse(this.$route.params.shopId),
          quantity: 1
        },
        shop: {
          imags: [{imagUrl: ""}],
          type: {name: ""}
        },
        searchtxt: "",
        shoptypes: [],
        cartnum: 0
      }
    },

    methods: {
      handleClick() {
        switch (this.activeName) {
          case "first":
            this.$nextTick(item => {
              this.$refs.shopImags.shop= this.shop;
            });
            break;
          case "second":
            this.$nextTick(item => {
              this.$refs.shopEvaluates.evaluate.gid = this.cart.gid;
              this.$refs.shopEvaluates.getData();
            });
            break;
        }
      },
      getshopidData() {
        this.$axios.get("shop/queryShopById.action/" + this.cart.gid)
          .then(res => {
            if (res.data.shopName.length > 20) {
              res.data.shopName = res.data.shopName.substring(0, 30) + "..."
            }
            res.data.imags.forEach(item=>{
              item.imagUrl=this.$store.state.path + item.imagUrl
            })
            this.shop = res.data;
            this.$refs.shopImags.shop.imags=res.data.imags;
          })
          .catch(err => {
            alert(err)
          })
      },
      createbrowsinghistory() {
        if (this.user.id != null) {
          var params = new URLSearchParams();
          params.append("pId", this.user.id);
          params.append("gId", this.$route.params.shopId);
          this.$axios.get("browsinghistory/createbrowsinghistory.action", {params: params})
            .then(res => {
            })
            .catch(err => {
              alert(err)
            })
        }
      },
      getObject() {
        //检查用户是否登录，如果没有登录，就不做异步调用
        if (this.user.id != null) {
          //异步获取数据，根据id查询用户
          this.$axios.get("queryUserById.action/" + this.user.id, null).then(response => {
            this.user = response.data;
          }).catch()
        } else {
          this.user = {
            id: null
          };
        }
      },
      logout() {
        //注销账号，清空sessionStorage数据
        sessionStorage.clear();
        //更换当前路由路径
        this.$router.push("/Login");
      },
      searchipt(searchtxt) {
        this.$router.push({
          name: 'shopXq',
          params: {
            searchtxt: searchtxt
          }
        });
      },
      tzgwcar() {
        if (this.user.id != null) {
          this.$router.push("/gwcar");
        } else {
          this.$router.push("/");
        }
      },
      fenlentzshopXq(typeid) {
        this.$router.push({
          name: 'shopXq',
          params: {
            typeid: typeid
          }
        });
      },
      getgwCartnum() {
        if (this.user.id != null) {
          this.$axios.get("cart/querygwCartnum.action/" + this.user.id)
            .then(res => {
              this.cartnum = res.data;
            })
            .catch(err => {
              alert(err)
            })
        } else {
          this.cartnum = 0;
        }
      },
      goUserMain() {
        //  去用户中心
        this.$router.push("/userMainView");
      },
      addCart() {
        //加入购物车
        if (this.user.id != null) {
          this.$axios.post("cart/cart.action", this.cart)
            .then(res => {
              if (res.data.code == 1) {
                this.$notify({
                  title: '加入成功',
                  message: res.data.msg,
                  type: 'success',
                  position: 'bottom-right'
                });
                this.getgwCartnum();
              } else if (res.data.code == 2) {
                this.$notify.error({
                  title: '加入失败',
                  message: res.data.msg,
                  position: 'bottom-right'
                });
              } else {
                this.$notify.error({
                  title: '加入失败',
                  message: res.data.msg,
                  position: 'bottom-right'
                });
              }
            })
            .catch(err => {
              this.$notify.error({
                title: '失败',
                message: res.data.msg,
                position: 'bottom-right'
              });
            })
        } else {
          this.$router.push("/Login");
        }
      },
      gobuy() {
        //立即购买
        let ids = [];
        if (this.user.id != null) {
          this.$axios.post("cart/cart.action", this.cart)
            .then(res => {
              if (res.data.code > 0) {
                ids.push(res.data.cart.id);
                let cartIds = JSON.stringify(ids);
                this.$router.push({path: '/addOrder/' + cartIds})
              }
            })
            .catch(err => {
              this.$message.error(err)
            })
        } else {
          this.$router.push("/Login");
        }
      },
      getShoptype() {
        this.$axios.get("shopType/shopType.action")
          .then(res => {
            this.shoptypes = res.data;
          })
          .catch(err => {
            alert(err)
          })
      },
      handleChange(id, num) {
        if (num != 1) {
          this.$axios.get("shop/queryShopById.action/" + id)
            .then(res => {
              if (res.data.shopUpnum < num) {
                this.$notify.error({
                  title: '失败',
                  message: "超出库存",
                  position: 'bottom-right'
                });
                this.cart.quantity = 1;
              }
            })
            .catch(err => {
              this.$notify.error({
                title: '失败',
                message: err,
                position: 'bottom-right'
              });
            })
        }
      }
    },
    created() {
      this.getShoptype();
      this.getgwCartnum();
      this.getshopidData();
      this.createbrowsinghistory();
    },
    components: {
      ShopImags, ShopEvaluates
    }
  }
</script>

<style scoped>
  .item-amount {
    width: 74px;
    height: 22px;
    background-color: white;
  }

  .item-amount a {
    text-decoration: none;
  }

  .item-amount a:hover {
    color: #ff6600;
  }

  .text-amount {
    width: 39px;
    height: 18px;
    border: 1px solid #aaa;
    color: #343434;
    text-align: center;
  }
</style>
